<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="width: 100%;background-color: rgb(239, 239, 239);padding: 10px;display: flex;">
            <div style="background-color: white;width: 70%;padding: 15px;min-height: 80vh;">
                <v-card elevation="0">
                    <div style="margin-left: 0.5%;display: flex;justify-content: space-between;align-items: end;">
                        <span style="font-size: 18;font-weight: bold;color: #333;">基本信息</span>
                        <span style="font-size: small;color: red;">如信息不符请联系管理员修改!</span>
                    </div>
                    <v-card-item>
                        <table>
                            <tr>
                                <td>姓名</td>
                                <td colspan="3">{{ userInfo.basicInfo.name }}</td>
                                <td>性别</td>
                                <td colspan="3">{{ userInfo.basicInfo.gender == '1' ? '男' : '女' }}</td>
                            </tr>
                            <tr>
                                <td>出生日期</td>
                                <td colspan="3">{{ userInfo.basicInfo.birthday }}</td>
                                <td>政治面貌</td>
                                <td>{{ userInfo.basicInfo.politics }}</td>
                                <td>民族</td>
                                <td>{{ userInfo.basicInfo.nationality }}</td>
                            </tr>
                            <tr>
                                <td>国籍</td>
                                <td colspan="3">{{ userInfo.basicInfo.origin }}</td>
                                <td>现住址</td>
                                <td colspan="3">{{ userInfo.basicInfo.address }}</td>
                            </tr>
                            <tr>
                                <td>所在学院</td>
                                <td colspan="3">{{ userInfo.academy }}</td>
                                <td>手机</td>
                                <td colspan="3">{{ userInfo.basicInfo.phone }}</td>
                            </tr>
                            <tr>
                                <td>研究方向</td>
                                <td colspan="7">{{ userInfo.researchDirection }}</td>
                            </tr>
                        </table>
                    </v-card-item>
                </v-card>
                <div style="display: flex;width: 100%;margin-top: 5%;">
                    <ResearchChart width="100%" height="320px"></ResearchChart>
                </div>
            </div>
            <div style="background-color: white;width: 28%;padding: 15px;height: 80vh;margin-left: 2%;">
                <v-card elevation="0" min-height="75vh">
                    <div style="padding-top: 5%;">
                        <div class="right-card">
                            <v-avatar size="100" style="cursor: pointer;" @click="openFileInput()">
                                <v-img :src="userStore.profile" cover v-if="userStore.profile != ''"></v-img>
                                <v-icon v-else icon="mdi-account-circle" size="50">
                                </v-icon>
                            </v-avatar>
                            <v-file-input v-model="selectedFile" accept="image/*" hide-details ref="fileInput"
                                style="display: none" @change="onFileSubmit()"></v-file-input>
                        </div>
                        <div class="right-card" style="font-size: 20px;font-weight: bold;margin-top: 5px;">
                            {{ userStore.name }}
                        </div>
                        <div class="right-card"
                            style="font-size: small;color: grey;text-align: center;max-width: 80%;margin: 0 auto;">
                            {{ userInfo.basicInfo.signature }}
                        </div>
                        <v-divider></v-divider>
                        <v-list width="100%">
                            <v-list-item prepend-icon="mdi-account-outline">
                                <v-list-item-title>{{ useUserStore().name }}</v-list-item-title>
                            </v-list-item>
                            <v-list-item prepend-icon="mdi-phone-outline">
                                <v-list-item-title>{{ userInfo.basicInfo.phone }}</v-list-item-title>
                            </v-list-item>
                            <v-list-item prepend-icon="mdi-home-outline">
                                <v-list-item-title>{{ userInfo.basicInfo.address }}</v-list-item-title>
                            </v-list-item>
                            <v-list-item prepend-icon="mdi-star-box-multiple-outline">
                                <v-list-item-title>{{ userInfo.basicInfo.introduction }}</v-list-item-title>
                            </v-list-item>
                        </v-list>
                        <v-divider></v-divider>
                        <div style="text-indent: 26px;font-size: 13px;max-width: 95%;margin: 0 auto;height: 19vh;">
                            科研成果：
                            {{ userInfo.basicInfo.scienceResearch }}
                        </div>
                    </div>
                    <v-divider></v-divider>
                    <div class="change-info">
                        <a style="font-size: 10px;color: blue;user-select: none;cursor: pointer;"
                            @click="changeInfo = true, loadResume()">点我修改信息</a>
                    </div>
                </v-card>
            </div>
            <v-overlay v-model="changeInfo" style="align-items: center;justify-content: center;">
                <v-sheet width="70vh" height="90vh">
                    <div style="width: 100%;justify-content: end;display: flex;padding-top: 1%;padding-right: 1%;">
                        <v-icon icon="mdi-close" size="27" style="cursor: pointer;" @click="changeInfo = false"></v-icon>
                    </div>
                    <div style="padding-left: 7%;padding-right: 7%;height: 100%;width: 100%;">
                        <v-row align="center">
                            <div>
                                <v-avatar size="100" style="cursor: pointer;" @click="openFileInput()">
                                    <v-img :src="userStore.profile" cover v-if="userStore.profile != ''"></v-img>
                                    <v-icon v-else icon="mdi-account-circle" size="50">
                                    </v-icon>
                                </v-avatar>
                                <v-file-input v-model="selectedFile1" accept="image/*" hide-details ref="fileInput1"
                                    style="display: none" @change="onFileSubmit()">
                                </v-file-input>
                            </div>
                        </v-row>
                        <div style="height: 7%;"></div>
                        <v-row>
                            <v-text-field label="现住址" variant="outlined" density="comfortable"
                                prepend-inner-icon="mdi-home-outline" v-model="resume.address">
                            </v-text-field>
                        </v-row>
                        <v-row>
                            <v-text-field label="联系方式" variant="outlined" density="comfortable"
                                prepend-inner-icon="mdi-phone-outline" v-model="resume.phone">
                            </v-text-field>
                        </v-row>
                        <v-row>
                            <v-text-field label="自我介绍" variant="outlined" density="comfortable"
                                prepend-inner-icon="mdi-pencil-outline" v-model="resume.introduction">
                            </v-text-field>
                        </v-row>
                        <!-- <v-row>
                            <v-textarea variant="outlined" label="科研成果" v-model="resume.scienceResearch"></v-textarea>
                        </v-row> -->
                        <v-row>
                            <div style="width: 100%;display: flex;justify-content: center;">
                                <v-btn @click="message('重置成功', 'success'), loadResume()">重置</v-btn>
                                <div style="width: 15%;"></div>
                                <v-btn @click="updateStudentInfo()">保存</v-btn>
                            </div>
                        </v-row>
                    </div>
                    <v-overlay v-model="isUpdating" contained style="align-items: center;justify-content: center;"
                        scrim="white" persistent>
                        <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
                    </v-overlay>
                </v-sheet>
            </v-overlay>
        </div>
    </v-layout>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores';
import { ref, onMounted } from 'vue'
import { UploadProfile } from '@/controllers/userController'
import { message } from '@/utils/message'
import { GetUserInfo } from '@/controllers/userController';
import { UpdateTeacherInfo } from '@/controllers/teacherController'
import type { TeacherInfo } from '@/models/userinfo';
import ResearchChart from '@/components/chart/ResearchChart.vue';

let isLoading = ref(true)
const userStore = useUserStore()
//头像
let selectedFile = ref(undefined)
let selectedFile1 = ref(undefined)
const fileInput = ref()
const fileInput1 = ref()

let key = 0//若url不变用于强制刷新
let userInfo = ref({
    basicInfo: {}
} as TeacherInfo)

let changeInfo = ref(false)
let resume = ref({
    address: '',
    phone: '',
    signature: '',
    introduction: '',
    scienceResearch: ''
})
let isUpdating = ref(false)

onMounted(() => {
    fileInput.value = document.querySelector('.v-file-input input[type="file"]');
    fileInput1.value = document.querySelector('.v-file-input1 input[type="file"]');
    getUserInfo().then(() => {
        isLoading.value = false
    })
});

const openFileInput = () => {
    if (fileInput.value) {
        fileInput.value.click();
    };
}

const onFileSubmit = async () => {
    if (selectedFile.value) {
        try {
            let profile = await UploadProfile(selectedFile.value[0])
            if (userStore.profile != profile) {
                userStore.profile = profile
            }
            else {
                userStore.profile = profile + '?key=' + key
                key++
            }
            localStorage.setItem('profile', btoa(profile))
            message('上传成功', 'success')
        }
        catch (err: any) {
            message(err.message, 'error')
        }
    }
}

async function getUserInfo() {
    try {
        userInfo.value = await GetUserInfo()
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}

function loadResume() {
    resume.value.address = userInfo.value.basicInfo.address
    resume.value.introduction = userInfo.value.basicInfo.introduction
    resume.value.phone = userInfo.value.basicInfo.phone
    resume.value.scienceResearch = userInfo.value.basicInfo.scienceResearch
}

async function updateStudentInfo() {
    const info: { [key: string]: any } = {}
    if (resume.value.address !== userInfo.value.basicInfo.address) info['address'] = resume.value.address
    if (resume.value.introduction !== userInfo.value.basicInfo.introduction) info['introduction'] = resume.value.introduction
    if (resume.value.phone !== userInfo.value.basicInfo.phone) info['phone'] = resume.value.phone
    if (resume.value.scienceResearch !== userInfo.value.basicInfo.scienceResearch) info['scienceResearch'] = resume.value.scienceResearch
    if (info.size === 0) {
        message('内容无更新')
        return
    }
    try {
        isUpdating.value = true
        await UpdateTeacherInfo(info)
        getUserInfo().then(
            () => {
                message('更新成功！', 'success')
                changeInfo.value = false
            }
        )
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isUpdating.value = false
    }
}
</script>
<style scoped>
.right-card {
    width: 100%;
    display: flex;
    justify-content: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table,
td {
    border: 2px solid #a5a5a5;
}

td {
    padding: 5px;
    text-align: left;
}

.change-info {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 10px;
}
</style>